<template>
  <div id="app">
    <img src="../../assets/logo.png">
    <h2>{{msg}}</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item  label="密码" prop="password">
          <el-input type='password' v-model="ruleForm.password"></el-input>
        </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">注册</el-button>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        msg: 'Welcome to 登录页面',
         ruleForm: {   //初始化
                   name: '',
                   password:''
                 },
        rules: {   //校验规则
                  name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                  ]
                }
      }
    },
    methods: {
          submitForm(formName) {
          //   this.$refs[formName].validate((valid) => {
          //     if (valid) {
          //       alert('submit!');
          //     } else {
          //       console.log('error submit!!');
          //       return false;
          //     }
          //   });
          let {name,password}= this.ruleForm;
            if(name === 'admin' && password === '123456'){
            alert('登录成功');
            this.$router.push('/home'); //登录成功后跳转页面
            }else{
            alter("请输入正确的用户名和密码！");
            }
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
  }
</script>

<style>
</style>
